<template >
  <!-- 顶部导航条 -->
  <div class="topbar">
    <!-- 版心 -->
    <div class="container">
      <!-- 左侧的欢迎区 -->
      <a href="/login" class="login">登录/注册</a>
      <!-- 右侧的导航区 -->
      <div class="topbar-nav rightfix" style="display: flex;justify-content: space-around;">
        <coupon-index></coupon-index>
        <ul class="list clearfix" style="margin-right:-130px;margin-top: -40px">
          <img  :src="url2" alt="" style="border-radius: 50%;width: 50px;height: 50px;margin: -10px 0 25px 50px" @click="user">
          <p style="margin-left: 110px;margin-top: -40px">zs</p>
          <el-badge :value="22" style="margin-right: 10px;margin-left: 30px" >
            <el-button>我的订单</el-button>
          </el-badge>
          <el-badge :value="12" >
            <el-button>我的购物车</el-button>
          </el-badge>
        </ul>
      </div>
    </div>
  </div>

<!--  <el-carousel indicator-position="outside" class="image">-->
<!--    <el-carousel-item v-for="item in 4" :key="item">-->
<!--      <h3 text="2xl" justify="center">{{ item }}</h3>-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
  <!-- 头部 -->
  <div class="header">
    <div class="container clearfix">
      <div class="search rightfix">
        <form action="#">
          <InputIndex/>
        </form>
      </div>
    </div>
  </div>
  <el-backtop :right="100" :bottom="100" />
  <!--  轮播图-->
  <el-carousel height="200px" motion-blur class="image">
    <el-carousel-item v-for="item in 4" :key="item" >
<!--      <h3 class="small justify-center" text="2xl">{{ item }}</h3>-->
      <el-image style="width: 499px; height: 200px" :src="url" />
      <el-image  style="width: 499.5px; height: 200px" :src="url" />
      <el-image  style="width: 499px; height: 200px" :src="url" />
    </el-carousel-item>
  </el-carousel>

  <!-- 侧边栏导航 -->
   <div class="sidebar">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
  </div>
  <!-- 主导航 -->
  <div class="main-nav">
    <div class="container clearfix">
      <div class="all-types leftfix">全部商品分类</div>
      <ul class="main-nav-list leftfix clearfix">
        <li><a href="#">显示器</a></li>
        <li><a href="#">CPU</a></li>
        <li><a href="#">主板</a></li>
        <li><a href="#">显卡</a></li>
        <li><a href="#">硬盘</a></li>
        <li><a href="#">内存</a></li>
        <li><a href="#">机箱</a></li>
        <li><a href="#">电源</a></li>
        <li><a href="#">散热器</a></li>
      </ul>
    </div>
  </div>
  <!-- 次导航 -->
  <div class="main-content">
    <div class="container clearfix">
      <ul        v-infinite-scroll="onLazyLoad"

          class="slide-nav leftfix" >
        <li v-for="(j,index) in brands" :key="index" class="infinite-list-item"  style="border-radius:10px;margin-top:10px;margin-left:2px;height:60px;width: 150px;background: #84fab0">
          <img :src="j.images"  style="margin-left:-18px;height:60px;width: 170px; border-radius: 10px;">
          <p style="margin-top: -50px">{{ j.name }}</p>
        </li>
        <p v-if="listParams.loading">Loading...</p>
        <p v-if="listParams.finished">No More</p>
      </ul>
      <!-- 商品栏 -->
      <transition name="el-zoom-in-center">
      <div class="banner leftfix">
        <div v-for="i in 21" :key="i" v-show=true class="as">
          <img :src="url" alt="硬盘" style="width: 90%; margin: 12px;border-radius: 10px">
          <p>三星（SAMSUNG）1TB SSD固态硬盘</p>
          <p>价格:￥869.00</p>
          <button>加入购物车</button>
        </div>
      </div>
    </transition>
    </div>

    <!-- 新闻栏 -->

    <div class="news">
      <ul v-infinite-scroll="load">
        <li v-for="i in count" :key="i" class="infinite-list-item">
          <img :src="url2"  style="height:200px;width: 295px; border-radius: 10px;">
          <h2 class="scenic_title" >{{i}}</h2>
        </li>
      </ul>
    </div>
<!--    图表-->
    <div class="charts" id="chart" >
      <chart-index></chart-index>

    </div>
    <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-left: 500px;"/>
    <!-- 页脚 -->
    <div class="footer">
      <div class="container">
        <!-- 顶部链接 -->
        <div class="top-links clearfix">
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">联系客服</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">配送方式</a></li>
            <li><a href="#">上门自提</a></li>
            <li><a href="#">配送服务查询</a></li>
            <li><a href="#">配送费收取标准</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">支付方式</a></li>
            <li><a href="#">货到付款</a></li>
            <li><a href="#">在线支付</a></li>
            <li><a href="#">分期付款</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">售后服务</a></li>
            <li><a href="#">售后政策</a></li>
            <li><a href="#">退款说明</a></li>
            <li><a href="#">返修/退换货</a></li>
            <li><a href="#">取消订单</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">特色服务</a></li>
            <li><a href="#">DIY装机</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">提供配送服务，支持货到付</a></li>
            <li><a href="#">款、POS 机刷卡和售后上门</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">查看详情</a></li>
          </ul>
        </div>
        <!-- 分隔线 -->
        <div class="line"></div>
        <!-- 底部链接 -->
        <div class="bottom-links">
          <ul class="bottom-links-list clearfix">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">合作招商</a></li>
            <li><a href="#">商家帮助</a></li>
            <li><a href="#">营销中心</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">销售联盟</a></li>
            <li><a href="#">隐私政策</a></li>
          </ul>
          <div class="copyright">京ICP备12345678901</div>
        </div>
      </div>
    </div>
    </div>


</template>

<script setup >
import {onMounted, ref} from 'vue'
import ChartIndex from '@/views/home/ChartIndex.vue'
import InputIndex from '@/views/home/InputIndex.vue'
import CouponIndex from "@/views/home/CouponIndex.vue";
//新闻加载
const count = ref(0)
//品牌加载
const count2 = ref(1)
const load = () => {
  count.value += 2
}

const url = require('../../assets/sx.png')
const url2 = require('../../assets/hw.png')
import {useRouter} from 'vue-router'
const router = useRouter()
const user = ()=>{
router.push('/layout')
}
const pageNumber = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(3)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  setInfo()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNumber.value = num
  setInfo()
}

import userInfo from "@/stores/userInfo";
import {userInfoService} from "@/api/user";
import {brandsInfoService} from "@/api/brand";
const users = userInfo()
onMounted(async ()=>{
  let result =await userInfoService()
  users.setInfo = result.data
})
const brands = ref([])
const listParams=ref({
      pageNo: 1,
      pageSize: 4,
      loading: false,
      error: false,
      finished: false,
    }
)
const setBrand=async ()=>{
  let params = {
    pageSize: listParams.value.pageSize,
    pageNumber: listParams.value.pageNo,
  }
  let result = await brandsInfoService(params)
  if (result.data.total<=0) {
    listParams.value.loading = false
    listParams.value.finished = true
    return
  }
  brands.value = brands.value.concat(result.data)
  console.log(brands.value)
  // 关闭 loading
  listParams.value.loading = false
  // 若返回条目小于设定的每页条目, 则显示 no more
  if (result.data.total < listParams.value.pageSize) {
    listParams.value.finished = true
  }
}
const onLazyLoad=()=> {
  listParams.value.loading = true
  if (listParams.value.finished === false) {
    // 加载未结束, 则增加分页参数
    listParams.value.pageNo++
    setBrand()
  }

}
</script>
<style lang="scss" scoped>
.as {
  transition: all 0.5s; //控制速度，也可不加
}
.as:hover {
  transform: scale(1.1); //放大倍数
}
/* 基础设置 */
.container {
  width: 1190px;
  margin: 10px auto;
}

.container .login{
  font-size: 25px;
  background-color: #8fd3f4;
  border-radius: 5px;
}
  /* #region顶部导航条start */
.topbar {
  height: 30px;
  //background-color: #ececec;
  margin-top: -60px;
}
.welcome {
  height: 30px;
  line-height: 30px;
  color: mediumvioletred;

}
//轮播图样式
.image{
  width: 99%;
  margin-bottom: -160px;
  margin-left: 6px;
  border-radius: 10px;
}


.topbar-nav .list {
  height: 30px;
  line-height: 30px;
}
.topbar-nav .list li {
  float: left;
  border-radius: 10px;
}
.topbar-nav .list li a {
  border-right: 1px solid #666;
  padding:0 15px;
}
.topbar-nav .list li:first-child a {
  padding-left: 0;
}
.topbar-nav .list li:last-child a {
  padding-right: 0;
  border: 0;
}
/* #endregion顶部导航条end */

/* #region头部导航条start */
.header {
  height: 120px;
}
.header .search form  {
  font-size: 0;
  margin-top: 42px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);

}
.header .search form * {
  border-radius: 5px;

}

.header input {
  width: 508px;
  height: 34px;
  border: 1px red solid;
}
.header button {
  width: 80px;
  height: 36px;
  background-color: red;
  vertical-align: top;
  background-image: url('../../assets/serch_icon.png');
  background-repeat: no-repeat;
  background-position: 28px 6px;

}
/* #endregion头部导航条end */

/* 侧边栏 */
 .sidebar {
    width: 130px;
    //height: 150px;
    //background-color: #333;
    position: sticky;
    top: 70%;
    padding: 1px;
    transform: translate(0%, -50%);
}
.sidebar a {
    display: block;
  background: cadetblue;
  border-radius: 10px;
  margin-left: 5px;
    margin-top: 10px;
    color: white;
    text-decoration: none;
    padding: 10px;

}
.sidebar a:hover {
    background-color: #555;
}

/* #region主导航start */
.main-nav {
  height: 48px;
  /* border-bottom: 1px solid red; */

}
.main-nav .all-types {
  width: 190px;
  height: 48px;
  line-height: 48px;
  background-color: red;
  border-radius: 10px;
  color: white;
  text-align: center;
  font-size: 16px;
}
.main-nav-list {
  height: 48px;
  width: 64%;
  line-height: 48px;
  margin-left: 23px;
  background-color: darkseagreen;
  border-radius: 10px;
}
.main-nav-list li {
  float: left;
  font-size: 16px;
  margin-left: 55px;
}

/* #endregion主导航end */

/* #region头部start */

.main-content {
  margin-top: 10px;

}
.main-content .slide-nav {
  width: 190px;
  height: 600px;
  background-color: lightgoldenrodyellow;
  position: sticky;
  top: 10px;
  overflow: auto;
  border-radius: 10px;
}
.main-content .slide-nav li {
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  padding-left: 16px;

}
/* .main-content .slide-nav li:hover {

} */
.main-content .slide-nav li:hover a {
  color: red;
  /* background-color: #DD302D; */
}
//分页样式
.pagination{

  margin-left: 600px;
}

.main-content .banner {
  width: 786px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  margin: 0 10px;
  border-radius: 10px;
}

.main-content .banner>div {
  width: 250px;
  height: 250px;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  margin: 5px 6px;
  float: left;
  //border: 1px solid black;
  border-radius: 10px;
}

.main-content .banner>div>img {
  width: 250px;
  height: 150px;
}

.main-content .banner>div>p {
  font-size: 14px;
  height: 25px;
  text-align: center;

}

.main-content .banner>div>button {
  background-color: darkseagreen; /* 绿色 */
  color: white; /* 文字白色 */
  padding: 10px 12px; /* 内部填充 */
  text-align: center;
  text-decoration: none;
  display: flex;
  font-size: 12px;
  margin: -10px 80px;
  cursor: pointer;
  border-radius: 10px;
}

.main-content .news{

  width: 300px;
  height: 400px;
  position: absolute;
  top: 61%;
  right: 1%;
  border: 2px solid #ddd;
  padding: 8px;
  margin-top: 25px;
  border-radius: 10px;
  //position: sticky;
  overflow: auto;
}

.main-content .news h2 {
  font-size: 20px;
  margin-top: -190px;
  margin-bottom: 200px;
  margin-left: 40px;
}

.charts{
  height:1470px;
  width:320px;
  left: 78%;
  bottom:-216.5%;
  margin-top:50px;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
  border-radius: 10px;
  position: absolute
}

.main-content .news ul li:hover {
  color: red;
}

/* #endregion头部end*/

/* #region页脚start */
.footer {
  margin-top: 48px;
  height: 440px;
  border-radius: 10px;
  background-color: #483E3E ;
}
.links-list {
  float: left;
  width: 190px;
  height: 176px;
  margin-top: 48px;
  margin-right: 10px;
}
.links-list:last-child {
  margin-right: 0px;
}
.links-list a {
  color: white;
  font-size: 14px;
}
.line {
  margin-top: 22px;
  height: 1px;
  background-color: #584D4D;
}
.bottom-links {
  text-align: center;
  margin-top: 47px;
}
.bottom-links-list {
  display: inline-block;
}

.bottom-links-list li {
  float: left;
}
.bottom-links-list li a {
  padding: 0 26px;
  border-right: 1px solid white;
  color: white;
}
.bottom-links-list li:first-child a {
  padding-left: 0;
}
.bottom-links-list li:last-child a {
  padding-right: 0;
  border: 0;
}
.copyright {
  margin-top: 10px;
  color: white;
}
/* #endregion页脚end*/
/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
  margin: 0;
  padding: 0;
}

ul,ol {
  list-style: none;
}

img {
  /* 底部留白 */
  display: block;
  border:0;
}

b,strong {
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  /* 父元素字号的百分比 */
  font-size: 100%;
  font-weight: normal;
}

i,em {
  /* 不倾斜 */
  font-style: normal;
}

u,ins,s,del {
  /* 去掉中划线和下划线 */
  text-decoration: none;
}

table {
  border: 1px solid #999;
  /* 相当于是cellspacing */
  border-spacing: 0;
  /* 1px边框 */
  border-collapse: collapse;
}

td,th {
  border: 1px solid #999;
}

input,button {
  /* 去掉轮廓线 */
  outline: none;
  border:none;
}

/* 风格设置 */
body {
  font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  color: #333;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  color:#DD302D;
  text-decoration: none;
}

.leftfix {
  float: left;
}

.rightfix {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

</style>